<template>
  <div>
    <!-- 歌单信息和其他内容 -->

    <PlaylistRating :currentRating="playlistRating" @rate="handleRatingChange" />

    <!-- 其他页面内容 -->
  </div>
</template>

<script>
import PlaylistRating from './PlaylistRating.vue';
import axios from 'axios';

export default {
  data() {
    return {
      playlistRating: 0, // 歌单评分，默认为0表示未评分
      // 其他数据...
    };
  },
  methods: {
    handleRatingChange(rating) {
      // 用户评分发生改变时的处理函数
      // 将评分提交给后端
      axios.post('/api/playlist-ratings/rate', { userId: this.userId, playlistId: this.playlistId, rating: rating })
        .then((response) => {
          if (response.status === 200) {
            // 评分成功，更新歌单评分
            this.playlistRating = response.data.rating;
          } else {
            // 评分失败
            alert('评分失败');
          }
        })
        .catch((error) => {
          console.error('评分失败: ', error);
          alert('评分失败');
        });
    },
    // 其他方法...
  },
};
</script>
